<template>
	<view class="assess">
		<view class="title">
			<view>我的运动评估</view>
			<view>{{year}}/{{month}}/{{day}} {{week}}</view>
		</view>
	
		<view class="write-info">
			<view class="info_item">
				<view class="text">身高</view>
				<u--input
						v-model="motionInfo.height"
						border="bottom"
						placeholder="请输入"
				></u--input>
				cm
			</view>
			<view class="info_item">
				<view class="text">体重</view>
				<u--input
						v-model="motionInfo.weight"
						border="bottom"
						placeholder="请输入"
				></u--input>
				Kg
			</view>
			<view class="info_item">
				<view class="text">年龄</view>
				<u--input
						v-model="motionInfo.age"
						border="bottom"
						placeholder="请输入"
				></u--input>
				Kg
			</view>
			<view class="info_item" @click="vitalShow = true">
				<view class="text">生命体征</view>
				<view class="info">
					<u--input
					  placeholder="请选择"
					  suffixIcon="arrow-down"
						v-model="shengming"
						:disabled="true"
					 ></u--input>
				</view>
			</view>
			<view class="info_item" @click="diseaseShow = true">
				<view class="text">疾病情况</view>
				<view class="info">
					 <u--input
					   placeholder="请选择"
					   suffixIcon="arrow-down"
						v-model="motionInfo.diseaseSituation"
						:disabled="true"
					  ></u--input>
				</view>
			</view>
			<view class="info_item" @click="weaknessScoreShow = true">
				<view class="text current">
					<text>衰弱量表</text>
					<text>(The Tilburg Scale)</text>
				</view>
				<view class="info">
					 <u--input
					   placeholder="请选择"
					   suffixIcon="arrow-down"
						 :disabled="true"
					  ></u--input>
				</view>
			</view>
			<view class="info_item" @click="sixMinIsShow = true">
				<view class="text">6分钟步行测试</view>
				<view class="info">
				 <u--input
					  placeholder="请选择"
					  suffixIcon="arrow-down"
						v-model="motionInfo.walkingTest"
						:disabled="true"
					 ></u--input>
				</view>
			</view>
			<view class="info_item" @click="gripStrengthTestShow = true">
				<view class="text">握力测试</view>
				<view class="info">
					 <u--input
					   placeholder="请选择"
					   suffixIcon="arrow-down"
						 :disabled="true"
						 v-model="gripStrengthTestZhanshi"
					  ></u--input>
				</view>
			</view>
			<view class="info_item" @click="tabooShow = true">
				<view class="text">运动禁忌</view>
				<view class="info">
					 <u--input
					   placeholder="请选择"
					   suffixIcon="arrow-down"
						v-model="motionInfo.sportsTaboo"
						:disabled="true"
					  ></u--input>
				</view>
			</view>
		</view>

		<view class="operation">
			<view class="save" @click="addMotionAssess">保存</view>
			<view class="cancel" @click="goIndex">取消</view>
		</view>
	
		<!-- 6分钟步行测试弹窗 已完成-->
		<u-picker 
			:show="sixMinIsShow" 
			:columns="sixMincolumns" 
			:defaultIndex="[0]"
			:closeOnClickOverlay="true" 
			@close="sixMinIsShow = false"
			@cancel="sixMinIsShow = false"
			@confirm="sixMinIsShow = false"
			@change="sixChange"
		></u-picker>
		
		<!-- 生命体征弹窗  已完成-->
		<u-popup :show="vitalShow" @close="vitalShow = false">
			<view class="popup-container">
				<view class="flex">
					<text>体温</text>
					<view class="flex-right">
						<u--input
							placeholder="记录体温"
							border="bottom"
							v-model="motionInfo.temperature"
						></u--input>
						<text>℃</text>
					</view>
				</view>
				<view class="flex">
					<text>脉搏</text>
					<view class="flex-right">
						<u--input
							placeholder="记录脉搏"
							border="bottom"
							v-model="motionInfo.pulse"
						></u--input>
						<text>次/分</text>
					</view>
				</view>
				<view class="flex">
					<text>呼吸</text>
					<view class="flex-right">
						<u--input
							placeholder="记录呼吸"
							border="bottom"
							v-model="motionInfo.breathing"
						></u--input>
						<text>次/分</text>
					</view>
				</view>
				<view class="flex">
					<text>血压</text>
					<view class="flex-right">
						<u--input
							placeholder="记录血压"
							border="bottom"
							v-model="motionInfo.bloodPressure"
						></u--input>
						<text>mmHg</text>
					</view>
				</view>
				<view class="flex">
					<text>指脉氧饱和</text>
					<view class="flex-right">
						<u--input
							placeholder="记录指脉氧饱和"
							border="bottom"
							v-model="motionInfo.spo2"
						></u--input>
						<text>%</text>
					</view>
				</view>
			
				<view class="base-operation-two">
					<view class="save" @click="shenmingSave">保存</view>
					<view class="cancel" @click="vitalShow = false">取消</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 运动禁忌弹窗  tabooShow 已完成-->
		<u-popup :show="tabooShow" @close="tabooShow = false">
			<view class="popup-container">
				<view class="popup_title">运动禁忌</view>
				<u-checkbox-group 
				    v-model="motionInfo.sportsTaboo"
				    iconPlacement="right" 
				    placement="column"
						:labelSize="32"
						:size="40"
						:iconSize="30"
						activeColor="#F2AF60"
						:borderBottom="true"
						@change="checkboxChangeTaboo"
						>
					<u-checkbox
						v-for="(item, index) in tabooConfig"
						:key="index"
						:label="item.name"
						:name="item.name"
						:labelSize="32"
					></u-checkbox>
				</u-checkbox-group>		
				<view class="base-operation">
					<view class="save" @click="tabooShow = false">保存</view>
				</view>
			
			</view>
		</u-popup>
		
		<!-- 疾病情况弹窗  diseaseShow 已完成-->
		<u-popup :show="diseaseShow" @close="diseaseShow = false">
			<view class="popup-container">
				<view class="popup_title">疾病情况</view>
				<u-checkbox-group 
				    v-model="motionInfo.diseaseSituation"
				    iconPlacement="right" 
				    placement="column"
						:labelSize="32"
						:size="40"
						:iconSize="30"
						activeColor="#F2AF60"
						:borderBottom="true"
						@change="checkboxChange"
						>
					<u-checkbox 
						v-for="(item, index) in diseaseConfig"
						:key="index"
						:label="item.name" 
						:name="item.name"
						:labelSize="32"
					></u-checkbox>
				</u-checkbox-group>		
				<view class="base-operation">
					<view class="save" @click="diseaseShow = false">保存</view>
				</view>
			
			</view>
		</u-popup>
		
		<!-- 握力测试弹窗 gripStrengthTestShow 已完成-->
		<u-popup :show="gripStrengthTestShow" @close="gripStrengthTestShow = false">
			<view class="popup-container">
				<view class="popup_title">握力测试</view>
				<!-- title -->
					<u-row
						justify="space-between"
						gutter="10"
					>
						<u-radio-group v-model="motionInfo.gender" size="36" activeColor="#F2AF60">
							<u-col span="4.5">
									<u-radio label="男性" name="2"  labelSize="30" iconSize="26"></u-radio>
							</u-col>
							<u-col span="4.5">
									<u-radio label="女性" name="1" labelSize="30" iconSize="26"></u-radio>
							</u-col>
							<u-col span="1">
									<view class=""></view>
							</u-col>
							<u-col span="2">
									<view class="">数值</view>
							</u-col>
						</u-radio-group>
					</u-row>
					<!-- 1 -->
					<u-row
						justify="space-between"
						gutter="10"
					>
						<u-radio-group v-model="motionInfo.gripStrengthTest" size="36" activeColor="#F2AF60">
							<u-col span="4.5">
									<view>BMI≤24.0kg/m2: ≤29</view>
							</u-col>
							<u-col span="4.5">
									<view>BMI≤23.0kg/m2: ≤17</view>
							</u-col>
							<u-col span="1">
									<u-radio labelSize="30" iconSize="26" name="BMI≤24.0kg/m2: ≤29" @change="changeRadio"></u-radio>
							</u-col>
							<u-col span="2">
									<view class=""></view>
							</u-col>
						</u-radio-group>
					</u-row>
					<!-- 2 -->
					<u-row
						justify="space-between"
						gutter="10"
					>
						<u-radio-group v-model="motionInfo.gripStrengthTest" size="36" activeColor="#F2AF60">
							<u-col span="4.5">
									<view>BMI≤24.1~26.0kg/ m2:≤30</view>
							</u-col>
							<u-col span="4.5">
									<view>BMI≤23.1~26.0kg/ m2:≤17.3</view>
							</u-col>
							<u-col span="1">
									<u-radio labelSize="30" iconSize="26" name="BMI≤24.1~26.0kg/ m2:≤30" @change="changeRadio"></u-radio>
							</u-col>
							<u-col span="2">
									<view class=""></view>
							</u-col>
						</u-radio-group>
					</u-row>
					<!-- 3 -->
					<u-row
						justify="space-between"
						gutter="10"
					>
						<u-radio-group v-model="motionInfo.gripStrengthTest" size="36" activeColor="#F2AF60">
							<u-col span="4.5">
									<view>BMI≤26.1~28.0kg/ m2:≤30</view>
							</u-col>
							<u-col span="4.5">
									<view>BMI≤26.1~29.0kg/ m2:≤18</view>
							</u-col>
							<u-col span="1">
									<u-radio labelSize="30" iconSize="26" name="BMI≤26.1~28.0kg/ m2:≤30" @change="changeRadio"></u-radio>
							</u-col>
							<u-col span="2">
									<view class=""></view>
							</u-col>
						</u-radio-group>
					</u-row>
					<!-- 4 -->
					<u-row
						justify="space-between"
						gutter="10"
					>
						<u-radio-group v-model="motionInfo.gripStrengthTest" size="36" activeColor="#F2AF60">
							<u-col span="4.5">
									<view>BMI>28.0kg/m2: ≤32</view>
							</u-col>
							<u-col span="4.5">
									<view>BMI>29.0kg/m2: ≤21</view>
							</u-col>
							<u-col span="1">
									<u-radio labelSize="30" iconSize="26" name="BMI>28.0kg/m2: ≤32" @change="changeRadio"></u-radio>
							</u-col>
							<u-col span="2">
									<view class=""></view>
							</u-col>
						</u-radio-group>
					</u-row>
			
				<view class="base-operation-two">
					<view class="save" @click="saveGripStrengthTest">保存</view>
					<!-- <view class="cancel" @click="gripStrengthTestShow = false">取消</view> -->
				</view>
			</view>
		</u-popup>
		
		<!-- 衰弱量表弹窗 weaknessScoreShow -->
		<u-popup :show="weaknessScoreShow" @close="weaknessScoreShow = false">
			<view class="popup-container">
				<view class="popup_title">衰弱量表</view>
				<weakness-table/>
				
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import { diseaseConfig, sixMincolumns, tabooConfig } from './config.js'
	import { addMotionAess } from '../../service/api.js'
	import { year, month, day, week } from '@/utils/date.js'
	import Local from '@/utils/cache.js'
	import weaknessTable from '@/components/Table.vue';
	export default {
		components: { weaknessTable },
		data() {
			return {
				diseaseConfig,
				sixMincolumns,
				tabooConfig,
				
				year,
				month,
				day,
				week,
				
				sixMinIsShow: false, //分钟步行测试弹窗
				vitalShow: false, //生命体征弹窗
				tabooShow: false, //运动禁忌弹窗
				diseaseShow: false, //疾病情况弹窗
				gripStrengthTestShow: false, //握力测试弹窗
				weaknessScoreShow: false, //衰弱量表弹窗
				
				motionInfo: {
					height: "",
					weight: "",
					age: "",
					temperature: "",
					pulse: "",
					breathing: "",
					bloodPressure: "",
					spo2: "",
					diseaseSituation: "",
					walkingTest: "",
					gender: "2",
					gripStrengthTest: "BMI≤24.0kg/m2: ≤29",
					sportsTaboo: "",
					weaknessScore: "",
					weakness: ""
				},
				
				shengming: "", //展示用
				gripStrengthTestZhanshi: "",
			}
		},
		onLoad() {
			const that = this;
			uni.$on('handleSave',function(data){
				console.log(data)
				that.motionInfo.weaknessScore = data.count;
				that.motionInfo.weakness = JSON.stringify(data.data);
				that.weaknessScoreShow = false;
			})
		},
		methods: {
			
			handleSaveWeakness() {
				this.weaknessScoreShow = false;
				
			},
			saveGripStrengthTest() {
				this.gripStrengthTestZhanshi = this.motionInfo.gripStrengthTest;
				this.gripStrengthTestShow = false;
			},
			changeRadio(e) {
				console.log(e)
			},
			goIndex() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			checkboxChange(val) {
				
				const newVal = val.map(item => item).join();
				this.motionInfo.diseaseSituation = newVal;
				console.log(val)
				console.log(newVal)
				console.log(this.motionInfo.diseaseSituation)
			},
			checkboxChangeTaboo(val) {
				const newVal = val.map(item => item).join();
				this.motionInfo.sportsTaboo = newVal;
			},
			sixChange(val) {
				const newVal = val.value.join();
				this.motionInfo.walkingTest = newVal;
			},
			shenmingSave() {
				const {
					temperature,
					pulse,
					breathing,
					bloodPressure,
					spo2
				} = this.motionInfo;
				const list = [
					temperature,
					pulse,
					breathing,
					bloodPressure,
					spo2
				];
				this.shengming = list.join();
				this.vitalShow = false;
			},
			addMotionAssess() {
				if(typeof this.motionInfo.diseaseSituation !== 'string') {
					this.motionInfo.diseaseSituation = this.motionInfo.diseaseSituation.map(item => item).join();
				}
				if(typeof this.motionInfo.sportsTaboo !== 'string') {
					this.motionInfo.sportsTaboo = this.motionInfo.sportsTaboo.map(item => item).join();
				}
				
				addMotionAess(this.motionInfo).then(res => {
					if(res.status == 200) {
						uni.showToast({
							title: "保存成功！",
							icon: "success",
							duration: 1000
						})
						Local.set("assessInfo", this.motionInfo)
						this.goIndex();
					} else {
						uni.showToast({
							title: `${res.message}`,
							icon: "error",
							duration: 1000
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">

::v-deep .u-checkbox {
	color: red!important;
	padding-bottom: 0!important;
	padding: 10px 0!important;
	
}

.assess {
	padding: 0 20px;
	.title {
		display: flex;
		justify-content: space-between;
		height: 50px;
		line-height: 50px;
		background-color: rgba(255, 226, 192, 0.3);
		border-radius: 8px;
		color: #EA9128;
		padding: 0 10px;
		margin: 10px 0 10px;
	}
	.write-info {
		.info_item {
			display: flex;
			justify-content: space-between;
			padding: 10px 0;
			align-items: center;
			.text {
				font-weight: bold;
				flex: 1;
				padding-left: 10px;
			}
			.info {
				// width: 200px;
				// background-color: red;
			}
			.current {
				text {
					display: block;
				}
				text:last-child {
					font-size: 14px;
					
				}
			}
		}
	}
	.operation {
		position: absolute;
		bottom: 14px;
		left: 10px;
		right: 10px;
		display: flex;
		justify-content: space-between;
		margin: 0 0px;
		>view {
			height: 56px;
			line-height: 56px;
			text-align: center;
			border-radius: $uni-border-radius-16;
			margin: 0 10px;
		}
		> view.save {
			flex: 1;
			background-color: #F2AF60;
			color: #fff;
		}
		> .cancel {
			width: 100px;
			border: 1px solid #D3D3D3;
			color: #D3D3D3;
		}
	}
}

.popup-container {
	// height: 400px;
	padding: 0 20px;
	.popup_title {
		font-size: 20px;
		padding: 20px 0;
	}
	.flex {
		display: flex;
		justify-content: space-between;
		height: 40px;
		line-height: 40px;
		padding: 10px;
		.flex-right {
			display: flex;
			::v-deep .u-input {
				width: 140px;
			}
			text {
				width: 40px;
			}
		}
	}
}

::v-deep .u-row {
	
	.u-col {
		border: 1px solid #ddd;
		padding: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;	
		> view {
			font-size: 14px;
			text-align: justify;
		}
	}
}
</style>
